<!--
 * @Author: wangming
 * @Date: 2021-05-08 15:24:24
 * @LastEditors: wangming
 * @LastEditTime: 2021-11-03 15:46:45
 * @Description: 分组布局
-->
<template>
  <div class="max sz p10">
    <div
      class="h50 ks-row-middle pr10"
      @click="changetab"
      :class="{ poi: config.__config.tabtype !== '-1' }"
    >
      <div
        class="max f18 b g3 lh1 pl10 sz bl pr10"
        :style="{ textAlign: config.__config.align }"
      >
        {{ config.__config.title }}
      </div>
      <i
        :class="icons"
        class="f16 g6"
        v-if="config.__config.tabtype !== '-1'"
      ></i>
    </div>
    <draggable
      v-show="config.__config.tabtype"
      data-key="layout"
      :delay="50"
      :forceFallback="true"
      chosen-class="drawing-chosen"
      drag-class="drawing-drag"
      @add="(v) => handleAdd(v, config.children)"
      class="drawing-board mh p10 layoutbox"
      group="form"
      :animation="200"
      :list="config.children"
      tag="el-row"
    >
      <slot v-bind:list="config.children"></slot>
    </draggable>
  </div>
</template>
<script>
import mixins from "./mixins.js";
export default {
  mixins: [mixins],
  computed: {
    icons() {
      return this.config.__config.tabtype
        ? "el-icon-caret-top"
        : "el-icon-caret-bottom";
    },
  },
  data() {
    return {};
  },
  methods: {
    changetab() {
      if (this.config.__config.tabtype === "-1") return;
      this.config.__config.tabtype = !this.config.__config.tabtype;
    },
  },
};
</script>

<style lang="scss" scoped>
.max {
  width: 100%;
}
.mh {
  min-height: 100px;
}
.bl {
  border-left: 4px solid #1890ff;
}
</style>
